<template>
	<view class="zan-actionsheet" :class="show ? 'zan-actionsheet--show' : ''">
		<view class="mask-class zan-actionsheet__mask" @tap="onMaskClick"></view>
		<view class="container-class zan-actionsheet__container">
			<!-- 选项按钮 -->
			<button v-for="(item,index) in actions" class="custom-class theme-class zan-btn" :key="index  +'-'+ item.name"
			 :class="[inGroup ? 'zan-btn--group' : '',isLast ? 'zan-btn--last' : '' , size ? 'zan-btn--'+size : '', size === 'mini' ? 'zan-btn--plain' : '', plain ? 'zan-btn--plain' : '', type ? 'zan-btn--'+type : '', item.loading ? 'zan-btn--loading' : '', disabled ? 'zan-btn--disabled' : '']"
			 :disabled="disabled" :data-index="index" hover-class="button-hover" :app-parameter="appParameter" :open-type="item.openType"
			 :hover-stop-propagation="hoverStopPropagation" :hover-start-time="hoverStartTime" :hover-stay-time="hoverStayTime"
			 :lang="lang" :session-from="sessionFrom" :send-message-title="sendMessageTitle" :send-message-path="sendMessagePath"
			 :send-message-img="sendMessageImg" :show-message-card="showMessageCard" @tap="handleBtnClick(item,goods_name,goods_image)">

				<!-- 自定义组件控制 slot 样式有问题，故在 slot 容器上传入 loading 信息 -->
				<view class="zan-actionsheet__btn-content" :class="[item.loading ? 'zan-actionsheet__btn--loading' : '']">
					<view class="zan-actionsheet__name">{{ item.name }}</view>
					<view v-if="item.subname" class="zan-actionsheet__subname">
						{{ item.subname }}
					</view>
				</view>
			</button>
			<!-- 关闭按钮 -->
			<view class="zan-actionsheet__footer">
				<button class="zan-actionsheet__btn" @tap="cancelClick">取消</button>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			goods_image:null,
			goods_name: null,
			actions: {
				type: Array,
				value: []
			},
			show: {
				type: Boolean,
				value: false
			},
			cancelWithMask: {
				type: Boolean,
				value: true
			},
			cancelText: {
				type: String,
				value: '取消'
			},
			inGroup: '',
			isLast: '',

			size: '',
			plain: '',
			type: '',
			disabled: '',
			appParameter: '',
			hoverStopPropagation: '',
			hoverStartTime: '',
			lang: '',
			sessionFrom: '',
			sendMessageTitle: '',
			sendMessagePath: '',
			sendMessageImg: '',
			showMessageCard: '',
			hoverStayTime: '',
		},
		data() {
			return {
				hoverClass: '',
			};
		},
		onLoad: function() {
			// console.log('分享组件');
		},
		methods: {
			onMaskClick: function onMaskClick() {
				if (this.cancelWithMask) {
					this.cancelClick();
				}
			},
			cancelClick: function cancelClick() {
				// this.triggerEvent('cancel');

				this.$parent.onCloseShare();
			},

			handleBtnClick: function handleBtnClick(res,goods_name,goods_image) {
				var _this = this;
				if (res.openType) {
					// 发送给朋友
					// console.log("success:" + JSON.stringify(goods_name));
					
					// #ifdef APP-PLUS
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: _this.siteInfo.siteroot + "download/index.html",
						title: goods_name,
						summary: "我正在使用大料小视频APP，赶紧跟我一起来体验！",
						imageUrl: goods_image,
						success: function(res) {
							console.log("success:" + JSON.stringify(res));
						},
						fail: function(err) {
							console.log("fail:" + JSON.stringify(err));
						}
					});

					// #endif

					// #ifdef MP-WEIXIN
					// 小程序通过openType控制分享，使用父级onShareAppMessage()
					// #endif

					return ;
				} else {
					// 生成商品海报
					// console.log('生成商品海报');
					this.$parent.onClickShareItem();
				}

			},
			handleTap: function handleTap() {
				if (this.disabled) {
					this.triggerEvent('disabledclick');
					return;
				}
				this.triggerEvent('btnclick');
			},
			switchLastButtonStatus: function switchLastButtonStatus() {
				var isLast = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

				this.setData({
					isLast: isLast
				});
			}
		}
	}
</script>

<style>
	.zan-btn {
		position: relative;
		color: #333;
		background-color: #fff;
		padding-left: 15px;
		padding-right: 15px;
		border-radius: 2px;
		font-size: 16px;
		line-height: 45px;
		height: 45px;
		box-sizing: border-box;
		text-decoration: none;
		text-align: center;
		vertical-align: middle;
		overflow: visible
	}

	.zan-btn--group {
		margin-bottom: 10px
	}

	.zan-btn::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 200%;
		height: 200%;
		-webkit-transform: scale(.5);
		transform: scale(.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		pointer-events: none;
		box-sizing: border-box;
		border: 0 solid #e5e5e5;
		border-width: 1px;
		border-radius: 4px
	}

	.zan-btn--primary {
		color: #fff;
		background-color: #4b0
	}

	.zan-btn--primary::after {
		border-color: #0a0
	}

	.zan-btn--warn {
		color: #fff;
		background-color: #f85
	}

	.zan-btn--warn::after {
		border-color: #f85
	}

	.zan-btn--danger {
		color: #fff;
		background-color: #f44
	}

	.zan-btn--danger::after {
		border-color: #e33
	}

	.zan-btn--small {
		display: inline-block;
		height: 30px;
		line-height: 30px;
		font-size: 12px
	}

	.zan-btn--small.zan-btn--group {
		margin-bottom: 0;
		margin-right: 5px
	}

	.zan-btn--mini {
		display: inline-block;
		line-height: 21px;
		height: 22px;
		font-size: 10px;
		padding-left: 5px;
		padding-right: 5px
	}

	.zan-btn--mini.zan-btn--group {
		margin-bottom: 0;
		margin-right: 5px
	}

	.zan-btn--large {
		border-radius: 0;
		border: none;
		line-height: 50px;
		height: 50px
	}

	.zan-btn--large.zan-btn--group {
		margin-bottom: 0
	}

	.zan-btn--plain.zan-btn {
		background-color: transparent
	}

	.zan-btn--plain.zan-btn--primary {
		color: #06bf04
	}

	.zan-btn--plain.zan-btn--warn {
		color: #f60
	}

	.zan-btn--plain.zan-btn--danger {
		color: #f44
	}

	.button-hover {
		opacity: .9
	}

	.zan-btn--loading {
		color: transparent;
		opacity: 1
	}

	.zan-btn--loading::before {
		position: absolute;
		left: 50%;
		top: 50%;
		content: ' ';
		width: 16px;
		height: 16px;
		margin-left: -8px;
		margin-top: -8px;
		border: 3px solid #e5e5e5;
		border-color: #666 #e5e5e5 #e5e5e5 #e5e5e5;
		border-radius: 8px;
		box-sizing: border-box;
		-webkit-animation: btn-spin .6s linear;
		animation: btn-spin .6s linear;
		-webkit-animation-iteration-count: infinite;
		animation-iteration-count: infinite
	}

	.zan-btn--danger.zan-btn--loading::before,
	.zan-btn--primary.zan-btn--loading::before,
	.zan-btn--warn.zan-btn--loading::before {
		border-color: #fff rgba(0, 0, 0, .1) rgba(0, 0, 0, .1) rgba(0, 0, 0, .1)
	}

	@-webkit-keyframes btn-spin {
		0% {
			-webkit-transform: rotate(0);
			transform: rotate(0)
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg)
		}
	}

	@keyframes btn-spin {
		0% {
			-webkit-transform: rotate(0);
			transform: rotate(0)
		}

		100% {
			-webkit-transform: rotate(360deg);
			transform: rotate(360deg)
		}
	}

	.zan-btn.zan-btn--disabled {
		color: #999 !important;
		background: #f8f8f8 !important;
		border-color: #e5e5e5 !important;
		cursor: not-allowed !important;
		opacity: 1 !important
	}

	.zan-btn.zan-btn--disabled::after {
		border-color: #e5e5e5 !important
	}

	.zan-btn--group.zan-btn--last {
		margin-bottom: 0;
		margin-right: 0
	}

	.zan-actionsheet {
		background-color: #f8f8f8;
	}

	.zan-actionsheet__mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10;
		background: rgba(0, 0, 0, 0.7);
		display: none;
	}

	.zan-actionsheet__container {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background: #f8f8f8;
		-webkit-transform: translate3d(0, 50%, 0);
		transform: translate3d(0, 50%, 0);
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transition: all 0.2s ease;
		transition: all 0.2s ease;
		z-index: 11;
		opacity: 0;
		visibility: hidden;
	}

	.zan-actionsheet__btn {
		margin-bottom: 0 !important;
	}

	.zan-actionsheet__footer .zan-actionsheet__btn {
		background: #fff;
	}

	.zan-actionsheet__btn-content {
		display: -webkit-box;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		-webkit-box-pack: center;
		justify-content: center;
	}

	.zan-actionsheet__subname {
		color: #999;
	}

	.zan-actionsheet__name,
	.zan-actionsheet__subname {
		height: 45px;
		line-height: 45px;
	}

	.zan-actionsheet__btn.zan-btn:last-child::after {
		border-bottom-width: 0;
	}

	.zan-actionsheet__subname {
		margin-left: 2px;
		font-size: 12px;
	}

	.zan-actionsheet__footer {
		margin-top: 10px;
	}

	.zan-actionsheet__btn--loading .zan-actionsheet__subname {
		color: transparent;
	}

	.zan-actionsheet--show .zan-actionsheet__container {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.zan-actionsheet--show .zan-actionsheet__mask {
		display: block;
	}
</style>
